<template>
  <div class="dayin">
    <el-button type="primary" @click="print()" class="dayin_btn"
      >打印预览</el-button
    >
    <div>
      <el-select v-model="is_je" filterable placeholder="请选择名称">
        <el-option
          v-for="(item, index) in name_list"
          :key="index"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>

    <div ref="print" id="printArea">
      <h3 style="text-align: center">{{ Infomation }}出货单</h3>
      <div class="list_order">
        <el-row style="width: 50%; display: flex; align-items: center">
          <el-col :span="24">
            客户: <input type="text" :value="customer" class="input_border" />
          </el-col>
        </el-row>
        <el-row
          style="
            width: 50%;
            display: flex;
            align-items: center;
            text-align: right;
          "
        >
          <el-col :span="24" style="text-align: right">
            日期: <input type="text" :value="strDate" class="input_border" />
          </el-col>
        </el-row>
      </div>
      <table
        class="table_tbs"
        style="border-collapse: collapse; margin-top: 10px"
        cellspacing="0"
      >
        <tr>
          <td class="td_1">行号</td>
          <!-- <td class="td_1">客户</td> -->
          <td class="td_1">单号</td>
          <td class="td_1">产品</td>
          <td class="td_1">型号</td>
          <td class="td_1">规格</td>
          <td class="td_1">尺寸</td>
          <td class="td_1">颜色</td>
          <td class="td_1">数量</td>
          <td class="td_1" v-if="is_je == 1">金额</td>
          <td class="td_1" v-if="is_je == 1">已收款</td>
          <td class="td_1" v-if="is_je == 1">应收款</td>
          <td class="td_1">交货日期</td>
          <td class="td_1" v-if="dayinlist[0].product!='沙发'">床头柜</td>
          <!-- <td class="td_1" v-if="dayinlist[0].product!='沙发'">床边备注</td> -->
          <td class="td_1">地址</td>
          <!-- <td class="td_1">电话</td> -->

          <!-- <td class="td_1" style="width: 200px">备注</td> -->
        </tr>
        <tr v-for="(items, index) in dayinlist" :key="index">
          <td>{{ index + 1 }}</td>
          <!-- <td>{{ items.customer }}</td> -->
          <td :rowspan="items.list" v-if="items.lists == 1">
            {{ items.order_number }}
          </td>
          <td>{{ items.product }}</td>
          <td>{{ items.model_number }}</td>
          <td>{{ items.specification }}</td>
          <td>{{ items.work_size }}</td>
          <td>{{ items.color }}</td>
          <td>{{ items.num }}</td>
          <td v-if="is_je == 1">{{ items.price }}</td>
          <td v-if="is_je == 1">{{ items.received }}</td>
          <td v-if="is_je == 1">{{ items.receivables }}</td>
          <td>{{ items.delivery_date }}</td>
          <td v-if="dayinlist[0].product!='沙发'">{{ items.chuangtougui_remark }}</td>
          <!-- <td v-if="dayinlist[0].product!='沙发'">{{ items.chuangbian_remark }}</td> -->
          <td>{{ items.customer_name }}</td>
          <!-- <td>{{ items.customer_phone }}</td> -->

          <!-- <td>{{ items.remark }}</td> -->
        </tr>
        <tr v-if="is_je == 1">
          <td>客户签名:</td>
          <td colspan="6"></td>
          <td>合计:</td>
          <td>{{ heji.price }}</td>
          <td>{{ heji.received }}</td>
          <td>{{ heji.receivables }}</td>
          <td></td>
          <td></td>
          
        </tr>
      </table>
      <p v-if="is_je == 1">注:签字确认后外观问题概不负责。</p>
      <div class="list_order" v-if="is_je == 1">
        <el-row style="width: 50%; display: flex; align-items: center">
          <el-col :span="7"> 制表: </el-col>
          <el-col :span="17">
            <input type="text" value="" class="input_border" />
          </el-col>
        </el-row>
        <el-row style="width: 50%; display: flex; align-items: center">
          <el-col :span="7"> 送货人员: </el-col>
          <el-col :span="17">
            <input type="text" value="" class="input_border" />
          </el-col>
        </el-row>
      </div>
      <div style="page-break-after: always"></div>
    </div>
  </div>
</template>

<script>
import { setDeliveryStatus } from "@/api/product/index";
export default {
  data() {
    return {
      dayin_name: "安徽布诺美",
      is_je: 1,
      name_list: [
        {
          name: "安徽布诺美(无金额)",
          value: 2,
        },
        {
          name: "安徽布诺美(有金额)",
          value: 1,
        },
      ],
      dayinlist: [],
      customer: "",
      strDate: "",
      Infomation: "",
      order_num: "",
      heji: {
        price: 0,
        received: 0,
        receivables: 0,
      },
    };
  },
  mounted() {
    // this.dayinlist = JSON.parse(this.$route.query.data);
    console.log(JSON.parse(this.$route.query.data));
    this.Infomation = this.$store.getters.Infomation.company_name;
    this.push_order(JSON.parse(this.$route.query.data));
    this.currentTime();
  },
  methods: {
    push_order(list) {
      this.customer = list[0].customer.customer_name;
      list.forEach((item) => {
        item.order_second.forEach((it, index) => {
          if (it.is_split == 2 && it.order_second.length == 0) {
            let obj = {
              list: item.order_second.length,
              lists: index + 1,
              order_number: item.order_number,
              product: it.product ? it.product.product_name : "",
              model_number: it.model_number ? it.model_number.model_number : "",
              specification: it.specification
                ? it.specification.specification
                : "",
              work_size: it.work_size,
              color: it.color ? it.color.color : "",
              num: it.num,
              price: it.price,
              received: item.received,
              receivables: item.receivables,
              delivery_date: this.formatterTime(item.delivery_date),
              chuangtougui_remark:it.chuangtougui_remark,
              chuangbian_remark:it.chuangbian_remark,
              ischuang:it.product.product_name=='床'?1:0,
              customer_name: item.customer_name,
              customer_phone: item.customer_phone,
              customer: item.customer ? item.customer.customer_name : "",
              remark: it.remark,
            };
            this.heji.price += Number(it.price);
            this.heji.received += Number(item.received);
            this.heji.receivables += Number(item.receivables);
            this.dayinlist.push(obj);
          }
          if (it.order_second) {
            it.order_second.forEach((its, indexs) => {
              if (its.is_needed == 1) {
                let obj = {
                  list: it.order_second.length,
                  lists: indexs + 1,
                  order_number: item.order_number,
                  product: its.product ? its.product.product_name : "",
                  model_number: its.model_number
                    ? its.model_number.model_number
                    : "",
                  specification: its.specification
                    ? its.specification.specification
                    : "",
                  work_size: its.work_size,
                  color: its.color ? its.color.color : "",
                  num: its.num,
                  price: its.price,
                  received: item.received,
                  receivables: item.receivables,
                  delivery_date: this.formatterTime(item.delivery_date),
                  chuangtougui_remark:its.chuangtougui_remark,
                  chuangbian_remark:its.chuangbian_remark,
                  ischuang:its.product.product_name=='床'?1:0,
                  customer_name: item.customer_name,
                  customer_phone: item.customer_phone,
                  customer: item.customer ? item.customer.customer_name : "",
                  remark: its.remark,
                };
                this.heji.price += Number(it.price);
                this.heji.received += Number(item.received);
                this.heji.receivables += Number(item.receivables);
                this.dayinlist.push(obj);
              }
            });
          }
        });
      });


      console.log("@333",this.dayinlist);
    },
    text_get(val) {
      console.log(val);
      if (val) {
        return val.replace(/[\r\n]/g, "<br/>");
      } else {
        return "";
      }
    },
    // 输入的金额进行大写转换
    transformation(val) {
      var fraction = ["角", "分"];
      var digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
      var unit = [
        ["元", "万", "亿"],
        ["", "拾", "佰", "仟"],
      ];
      var head = val < 0 ? "欠" : "";
      val = Math.abs(val);
      var s = "";
      for (var i = 0; i < fraction.length; i++) {
        s += (
          digit[Math.floor((val * 100 * Math.pow(10, i)) / 10) % 10] +
          fraction[i]
        ).replace(/零./, "");
      }

      s = s || "";
      val = Math.floor(val);
      for (var i = 0; i < unit[0].length && val > 0; i++) {
        var p = "";
        for (var j = 0; j < unit[1].length && val > 0; j++) {
          p = digit[val % 10] + unit[1][j] + p;
          val = Math.floor(val / 10);
        }
        s = p.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + s;
      }
      return (
        head +
        s
          .replace(/(零.)*零元/, "元")
          .replace(/(零.)+/g, "零")
          .replace(/^整$/, "零元")
      );
    },
    formatterTime(data) {
      if (data) {
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).splice(0, 11)[0];
      } else {
        return "";
      }
    },
    set_DeliveryStatus() {
      let ids_s = [];
      this.dayinlist.forEach((item) => {
        ids_s.push(item.id);
      });
      setDeliveryStatus({ ids: ids_s }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.print();
        }
      });
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      console.log("month", month);
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      this.strDate = year + "年" + dateArr[0] + "月" + dateArr[1] + " 日";
      // dateArr[2] +
      // ":" +
      // dateArr[3] +
      // ":" +
      // dateArr[4];
    },
    print() {
      this.$print(this.$refs.print);
    },
  },
};
</script>
<style scoped>
.dayin {
  padding: 25px;
  box-sizing: border-box;
}

/* 
长 75mm
宽 45mm */
#printArea {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  margin: 0 auto;
}

#printArea > div:first-child {
  margin-top: 0px;
}

#printArea table {
  width: 100%;
  border-collapse: collapse;
}

#printArea table th {
  color: #333;
  padding: 5px 0;
  font-size: 26px;
}

#printArea table {
  border: 1px solid #000;
}

#printArea table td,
table th {
  border: 1px solid #000;
  text-align: center;
  padding: 0;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
}

#printArea table tr td {
  min-height: 35px;
  line-height: 35px;
}

/* #printArea table thead th {
  background-color: #0a8fa1;
} */

#printArea table tr th,
table tr td {
  padding: 5px 12px;
}

.procedure {
  word-wrap: break-word;
}

.dayin_btn {
  background: #0a8fa1;
  border: none;
  display: block;
  margin: 20px auto;
}

.list_order {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.div_span {
  margin-bottom: 5px;
}

.div_span > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
}

.table_tb tr {
  display: flex;
}

.table_tb tr td {
  font-size: 14px;
  display: block;
  height: auto;
  word-break: break-all;
}

.input_border {
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: 35px;
}

@media print {
  .input_border {
    border: none;
    height: 35px;
  }
  .dayin {
    padding: 25px;
    box-sizing: border-box;
  }

  /* 
长 75mm
宽 45mm */
  #printArea {
    width: 100%;
    padding: 2px;
    box-sizing: border-box;
    margin: 0 auto;
  }

  #printArea > div:first-child {
    margin-top: 0px;
  }

  #printArea table {
    width: 100%;
    border-collapse: collapse;
  }

  #printArea table th {
    color: #333;
    padding: 5px 0;
    font-size: 26px;
  }

  #printArea table {
    border: 1px solid #000;
  }

  #printArea table td,
  table th {
    border: 1px solid #000;
    text-align: center;
    padding: 0;
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
  }

  #printArea table tr td {
    /* min-height: 35px; */
    /* line-height: 35px; */
  }

  /* #printArea table thead th {
  background-color: #0a8fa1;
} */

  #printArea table tr th,
  table tr td {
    padding: 5px 12px;
  }

  .procedure {
    word-wrap: break-word;
  }

  .list_order {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
  }

  .div_span {
    margin-bottom: 5px;
  }

  .div_span > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
  }

  .table_tb tr {
    display: flex;
  }

  .table_tb tr td {
    font-size: 14px;
    display: block;
    height: auto;
    word-break: break-all;
  }
}
</style>
